<template>
  <div class="main-content">
    <div class="ratio">
      <span class="ratio-text" :style="{background: data[0].text_bg}">{{data[0].text}}</span>
      <div class="radio-bar-container">
        <div class="ratio-bar" 
        v-for="(item, index) in data" 
        :key="index"
        :style="{
          width: item.num + '%', 
          background: item.ratio_bg,
          textAlign: (index % 2 ===0 ? 'left': 'right')}" 
        >
        <span style="margin-left: 10px" v-if="index % 2 == 0">{{item.num}}%</span>
        <span style="margin-right: 10px" v-else>{{item.num}}%</span>
      </div>
      </div>
      <span class="ratio-text" :style="{background: data[1].text_bg}">{{data[1].text}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  props: {
    data: Array
  },
}
</script>
<style lang="less" scoped>
  .main-content {
    padding: 15px;
    color: #fff;
    font-size: 12px;
    .ratio {
      display: flex;
      line-height: 24px;
      .ratio-text {
        padding: 0 10px
      }
      .radio-bar-container,
      .ratio-bar {
        display: inline-block;
      }
      .radio-bar-container {
        flex: 1;
      }
      span {
        display: inline-block;
      }
    }
  }
</style>